<script setup>
import { ref } from 'vue';

const modalDialogOpen = ref(false);
const nonModalDialogOpen = ref(false);
const alertDialogOpen = ref(false);
const alertConfirmed = ref(false);

const confirmAlert = () => {
  alertConfirmed.value = true;
  alertDialogOpen.value = false;
};
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Dialog and DialogBody Components</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Modal Dialog</h3>
        <div class="flex flex-col space-y-4">
          <Button @click="modalDialogOpen = true"> Open Modal Dialog </Button>

          <Dialog
            v-model="modalDialogOpen"
            type="modal"
            aria-labelledby="dialog-title"
          >
            <DialogBody>
              <h2 id="dialog-title" class="mb-4 text-lg font-semibold">
                Modal Dialog Title
              </h2>
              <p class="mb-4">
                This is a modal dialog example. It blocks interaction with the
                page until dismissed.
              </p>
              <div class="flex justify-end">
                <Button @click="modalDialogOpen = false"> Close </Button>
              </div>
              <template #close>
                <Button appearance="outline" @click="modalDialogOpen = false">
                  Close
                </Button>
              </template>
            </DialogBody>
          </Dialog>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Non-Modal Dialog</h3>
        <div class="flex flex-col space-y-4">
          <Button @click="nonModalDialogOpen = true">
            Open Non-Modal Dialog
          </Button>

          <Dialog
            v-model="nonModalDialogOpen"
            type="non-modal"
            aria-labelledby="non-modal-title"
          >
            <DialogBody>
              <h2 id="non-modal-title" class="mb-4 text-lg font-semibold">
                Non-Modal Dialog Title
              </h2>
              <p class="mb-4">
                This is a non-modal dialog example. It allows interaction with
                the page.
              </p>
              <div class="flex justify-end">
                <Button @click="nonModalDialogOpen = false">Close</Button>
              </div>
            </DialogBody>
          </Dialog>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Alert Dialog</h3>
        <div class="flex flex-col space-y-4">
          <Button appearance="outline" @click="alertDialogOpen = true">
            Open Alert Dialog
          </Button>

          <Dialog
            v-model="alertDialogOpen"
            type="alert"
            aria-labelledby="alert-title"
          >
            <DialogBody>
              <h2 id="alert-title" class="mb-4 text-lg font-semibold">
                Alert Dialog
              </h2>
              <p class="mb-4">
                Are you sure you want to proceed with this action?
              </p>
              <div class="flex justify-end gap-2">
                <Button appearance="outline" @click="alertDialogOpen = false">
                  Cancel
                </Button>
                <Button @click="confirmAlert">Confirm</Button>
              </div>
            </DialogBody>
          </Dialog>
        </div>
        <div class="mt-2" v-if="alertConfirmed">
          <p class="text-sm text-green-600">Alert confirmed!</p>
        </div>
      </div>
    </div>
  </div>
</template>
